<template>
  <div align="left">
    <h2>BOM信息详情页</h2>

    <el-descriptions title="基本信息" :column="2" border>
      <el-descriptions-item label="Bom编号：" label-align="right" align="center" label-class-name="my-label"
        class-name="my-content" width="150px"> <el-tag size="small">{{ tableData.BOMNum
          }}</el-tag></el-descriptions-item>
      <el-descriptions-item label="成品类型：" label-align="right" align="center"><el-tag size="small">{{
          tableData.ArtifactType
          }}</el-tag></el-descriptions-item>
      <el-descriptions-item label="日产量：" label-align="right" align="center"><el-tag size="small">{{
          tableData.DailyOutput
          }}</el-tag></el-descriptions-item>
      <el-descriptions-item label="备注：" label-align="right" align="center">
        <el-tag size="small">{{ tableData.Remark }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="Bom主题：" label-align="right" align="center"><el-tag size="small">{{
          tableData.BOMTopic
          }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="版本：" label-align="right" align="center"><el-tag size="small">{{
          tableData.Versions }}</el-tag>
      </el-descriptions-item>
    </el-descriptions>
    <br />

    <el-descriptions title="BOM配件" :column="2" border>
      <el-descriptions-item label="物料编号：" label-align="right" align="center" label-class-name="my-label"
        class-name="my-content" width="150px"> <el-tag size="small">{{ MarData.MatCode
          }}</el-tag></el-descriptions-item>
      <el-descriptions-item label="物料名称：" label-align="right" align="center"><el-tag size="small">{{
          MarData.MatName
          }}</el-tag></el-descriptions-item>
      <el-descriptions-item label="规格型号：" label-align="right" align="center"><el-tag size="small">{{
          MarData.MatModel
          }}</el-tag></el-descriptions-item>
      <el-descriptions-item label="单位：" label-align="right" align="center">
        <el-tag size="small">{{ MarData.MatUnit }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="品牌：" label-align="right" align="center"><el-tag size="small">{{
          MarData.MatBrand
          }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="配件数量：" label-align="right" align="center"><el-tag size="small">{{
          tableData.Quantity }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="损耗率" label-align="right" align="center"><el-tag size="small">{{
          MarData.MatId }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="采购单价：" label-align="right" align="center"><el-tag size="small">{{
          MarData.MatPrice }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="当前库存：" label-align="right" align="center"><el-tag size="small">{{
          MarData.MatMax }}</el-tag>
      </el-descriptions-item>
    </el-descriptions>
    <br />

  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import axios from "axios";

const router = useRouter();
const route = useRoute();

const tableData = ref({
  BOMNum: "",
  ArtifactType: "",
  DailyOutput: "",
  Remark: "",
  BOMTopic: "",
  Versions: "",
  Quantity:""
});
//Bom下的物料
const MarData = ref({
  MatId: "",
  MatCode: "",
  MatName: "",
  MatModel: "",
  MatBrand: "",
  MatUnit: "",
  MatType: "",
  MatPerMess: "",
  MatPrice: "",
  MatMin: "",
  MatMax: "",
  MatDate: "",
  MatPolice: "",
  MatState: "",
  MatDesc: "",
  MatImage: ""
});
const getArtifacList = () => {
  const bomId = route.query.BOMID; // 获取主键ID
  axios
    .get(`BOM/GetBomDetail?bomId=${bomId}`)
    .then((res) => {
      tableData.value = res.data.Data;
    })
    .catch((error) => {
      console.error("获取数据失败：", error);
    });
};
//根据BOM主键获取物料信息
const getMarList = () => {
  const bomId = route.query.BOMID; // 获取主键ID
  axios
    .get(`BOM/GetMaterialsByBOMId?bomId=${bomId}`)
    .then((res) => {
      MarData.value = res.data.Data[0];
    })
    .catch((error) => {
      console.error("获取数据失败：", error);
    });
};
onMounted(() => {
  getArtifacList();
  getMarList();
});
</script>

<style scoped>
.custom-table {
  width: 100%;
  border-collapse: collapse;
}

.custom-table td {
  border: 1px solid #e0e0e0;
  padding: 10px;
}

.custom-table td:first-child {
  font-weight: bold;
  background-color: #f5f5f5;
}
</style>